<!DOCTYPE html>
<html>
<head>
  <title>BPMN Editor</title>
  <!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
  <meta charset="UTF-8">
  <script src="go.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
  <link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />
  <script src="DrawCommandHandler.js"></script>
  <link href="BPMN.css" rel="stylesheet" type="text/css" />
  <script src="BPMNClasses.js"></script>
  <script src="BPMN.js"></script>
</head>
<body onload="init()">
  <div>
    <div id="currentFile">(Unsaved File)</div>
      <ul id="menuui">
        <li><a href="#">File</a>
          <ul>
            <li><a href="#" onclick="newDocument()">New</a></li>
            <li><a href="#" onclick="openDocument()">Open...</a></li>
            <li><a href="#" onclick="saveDocument()">Save</a></li>
            <li><a href="#" onclick="saveDocumentAs()">Save As...</a></li>
            <li><a href="#" onclick="removeDocument()">Delete...</a></li>
          </ul>
        </li>
        <li><a href="#">Edit</a>
          <ul>
            <li><a href="#" onclick="myDiagram.commandHandler.undo()">Undo</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.redo()">Redo</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.cutSelection()">Cut</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.copySelection()">Copy</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.pasteSelection()">Paste</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.deleteSelection()">Delete</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.selectAll()">Select All</a></li>
          </ul>
        </li>
        <li><a href="#">Align</a>
          <ul>
            <li><a href="#" onclick="myDiagram.commandHandler.alignLeft()">Left Sides</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignRight()">Right Sides</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignTop()">Tops</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignBottom()">Bottoms</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignCenterX()">Center X</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignCenterY()">Center Y</a></li>
          </ul>
        </li>
        <li><a href="#">Space</a>
          <ul>
            <li><a href="#" onclick="myDiagram.commandHandler.alignRow(askSpace())">In Row...</a></li>
            <li><a href="#" onclick="myDiagram.commandHandler.alignColumn(askSpace())">In Column...</a></li>
          </ul>
        </li>
        <li><a href="#">Options</a>
          <ul>
            <li><a href="#">
              <input id="grid" type="checkbox" name="options" value="grid" onclick="updateGridOption()">Grid</a></li>
            <li><a href="#">
              <input id="snap" type="checkbox" name="options" value="0" onclick="updateSnapOption()">Snapping</a></li>
          </ul>
        </li>
      </ul>
    <!--END menu bar -->



    <!-- Styling for this portion is in BPMN.css -->
    <div id="PaletteAndDiagram">
      <div id="sideBar">

    <span style="display: inline-block; vertical-align: top; padding: 5px; width:100%">
      <div id="accordion">
        <h4>Level 1 items</h4>
        <div>
          <div id="myPaletteLevel1" class="myPaletteDiv" ></div>
        </div>
        <h4>Level 2 items</h4>
        <div>
          <div id="myPaletteLevel2" class="myPaletteDiv"></div>
        </div>
        <h4>Other items</h4>
        <div>
          <div id="myPaletteLevel3" class="myPaletteDiv"></div>
        </div>
      </div>
    </span>

        <div class="handle">Overview:</div>
        <div id="myOverviewDiv"></div>
      </div>
      <div id="myDiagramDiv"></div>
      <div id="description">
        <p>
          This sample describes templates and relationships typically used in <a href="https://en.wikipedia.org/wiki/Business_Process_Model_and_Notation">Business Process Model and Notation (BPMN)</a>,
          to be used as a starting point for developing BPMN or flow-like web applications.
        </p>
        <p>In addition to this HTML file, this sample uses the files:</p>
        <ul>
          <li><a href="BPMN.css">BPMN.css</a> for styling
          <li><a href="BPMN.js">BPMN.js</a> for the Diagram logic
          <li><a href="BPMNClasses.js">BPMNClasses.js</a> - Custom PoolLink and BPMNLinkingTool classes
          <li><a href="DrawCommandHandler.js">DrawCommandHandler.js</a> - Custom CommandHandler class
        </ul>
        <span>
            <div>
            <p>Additional sample data files:</p>
                <figure>
                    <img src="BPMNdata/BasicOrderProcess.png" onclick='loadJSON("BPMNdata/BasicOrderProcess.json")' title="Basic Order Process"></img>
                    <figcaption>Basic Order Process</figcaption>
                </figure>
                <figure>
                    <img src="BPMNdata/OMG BPMN by Example Figure 5.1.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.1.json")' title="OMG BPMN by Example Figure 5.1"></img>
                    <figcaption>OMG BPMN by Example Figure 5.1</figcaption>
                </figure>
                <figure>
                    <img src="BPMNdata/OMG BPMN by Example Figure 5.2.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.2.json")' title="OMG BPMN by Example Figure 5.2"></img>
                    <figcaption>OMG BPMN by Example Figure 5.2</figcaption>
                </figure>
                <figure>
                    <img src="BPMNdata/OMG BPMN by Example Figure 5.3.png" onclick='loadJSON("BPMNdata/OMG BPMN by Example Figure 5.3.json")' title="OMG BPMN by Example Figure 5.3"></img>
                    <figcaption>OMG BPMN by Example Figure 5.3</figcaption>
                </figure>
          </div>
        </span>
      </div>

      </div>

    <div id="openDocument" class="draggable">
      <div id="openDraggableHandle" class="handle">Open File</div>
      <div id="openText" class="elementText">Choose file to open...</div>
      <select id="mySavedFiles" class="mySavedFiles"></select>
      <br />
      <button id="openBtn" class="elementBtn" type="button" onclick="loadFile()" style="margin-left: 70px">Open</button>
      <button id="cancelBtn" class="elementBtn" type="button" onclick="closeElement('openDocument')">Cancel</button>
    </div>

    <div id="removeDocument" class="draggable">
      <div id="removeDraggableHandle" class="handle">Delete File</div>
      <div id="removeText" class="elementText">Choose file to remove...</div>
      <select id="mySavedFiles2" class="mySavedFiles"></select>
      <br />
      <button id="removeBtn" class="elementBtn" type="button" onclick="removeFile()" style="margin-left: 70px">Remove</button>
      <button id="cancelBtn2" class="elementBtn" type="button" onclick="closeElement('removeDocument')">Cancel</button>
    </div>
  </div>
</body>
</html>
